<template>
	<view class="content">
		<!-- <image v-if="avd" :src="avd" class="banner" mode="widthFix"
			style="width: 100%;border-radius: 8rpx;margin-bottom: 30rpx;"></image> -->
        <view class=""></view>
		<view v-if="venueName" class="bt flex f30 c2">
			<image :src="imgHost+'/home_ic_location.png'"></image>{{venueName}}
		</view>
		<view class="cph">
			<view class="f40 c1 fw5 textAlign">
				{{time}}小时停车优惠
			</view>
			<view class="f28 c9 mt20 textAlign tip">
				请输入车牌号领取
			</view>
			<car-number-input v-if="showNum" @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			<view v-if="list.length > 0" class="ul">
				<view v-for="(item, index) in list" :key="index" class="li flex f26 c3" @click="defaultNumBtn(item)">
					<text>{{item}}</text>
				<!-- 	<u-icon name="close" color="#999999" size="20rpx"></u-icon> -->
				</view>
			</view>
			<view v-if="isValid" class="qrBtn f32 cf fw5" @click="rcBtn">
				立即领取
			</view>
			<view v-else class="qrBtn2 f32 cf fw5" >
				立即领取
			</view>
		</view>
		<view class="lqjl" @click="jump2('/pages/parking/history')">
			领取记录
		</view>
		<u-popup :show="agreement" @close="showxy" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">领取失败</view>
				<view class="f28 c3 textAlign">
					{{ err }}
				</view>
				<view class="footBtn" @click="showxy">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				avd: '',
				err: '',
				qrCode: '',
				agreement: false,
				showNum: false,
				list: [],
				time: '',
				venId: '',
				defaultNum: '',
				isValid:false
			}
		},
		onLoad(ops) {
			this.venId = ops.venueId
			let qrCode = ops.id
			if(qrCode.length === 80) {
				qrCode = qrCode + '='
			}
			this.qrCode = qrCode
		},
		onShow() {
			setTimeout(() => {
				this.getPaymentInfo()
			}, 300)
		},
		methods: {
			showxy() {
				this.agreement = !this.agreement
			},
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			defaultNumBtn(e) {
				this.showNum = false
				setTimeout(()=> {
					this.defaultNum = e
					this.showNum = true
				}, 10)
			},
			numberInputResult(e) {
				this.defaultNum = e.trim()
			},
			getPaymentInfo() {
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venId,
							userId: uni.getStorageSync('userId'),
							qrCode:this.qrCode
						}
					},
					api: this.$api.pdVenuePd()
				}).then((res) => {
					if (res.errorCode != '000000') return;
					this.time = res.record
					this.isValid = true;
				});
				this.$app.ajax({
					data: {
						param: {
							userId: uni.getStorageSync('userId')
						}
					},
					api: this.$api.memberPdPlateNumber()
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.list = res.recordList || []
						this.showNum = true
					} else {
						this.showNum = true
					}
				});
			},
			rcBtn() {
				if (this.defaultNum.length < 7) {
					return this.$app.showToast('请输入车牌号')
				}
				this.$app.showLoading()
				this.getLoad()
			},
			getLoad() {
				this.$app.ajax({
					data: {
						param: {
							plateNumber: this.defaultNum,
							qrCode: this.qrCode
						}
					},
					hideLoading: false,
					api: this.$api.memberGetPd(),
				}).then((res) => {
					uni.hideLoading()
					if (res.errorCode === '000000') {
						this.jump3('/pages/parking/success')
					} else {
						this.agreement = true
						this.err= res.errorMsg || '优惠券已领完，下次早点来哦~'
					}
				}).catch((err) => {
					uni.hideLoading()
					this.agreement = true
					console.log('err', err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;

		.bt {
			width: 690rpx;
			height: 98rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 30rpx auto 20rpx;
			image {
				margin-right: 18rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.cph {
			width: 690rpx;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;

			.tip {
				margin-bottom: 48rpx;
			}

			.qrBtn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #00BA92;
				border-radius: 44rpx;
				border: 1px solid #00BA92;
				text-align: center;
				margin-top: 60rpx;
			}
			.qrBtn2 {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background:#666666;
				border-radius: 44rpx;
				border: 1px solid #666666;
				text-align: center;
				margin-top: 60rpx;
			}
			.ul {
				display: flex;
				flex-wrap: wrap;
				padding-top: 20rpx;
				.li {
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1px solid #CCCCCC;
					box-sizing: border-box;
					padding: 0 16rpx;
					margin-top: 20rpx;
					margin-right: 16rpx;
					&:last-of-type {
						margin-right: 0;
					}
					text {
						margin-right: 12rpx;
					}
				}
			}
		}
	}
	.lqjl {
		width: 100%;
		font-weight: 400;
		font-size: 30rpx;
		color: #00BA92;
		line-height: 42rpx;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;
		z-index: 99;
	}
	.footBtn {
		border-top: 1px solid rgba(238, 238, 238, 1);
		font-weight: bolder;
		font-size: 30rpx;
		margin-top: 42rpx;
		color: #00BA92;
		line-height: 100rpx;
		text-align: center;
	}
 
</style>